<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="证件名称管理">
    <el-form :inline="true">
      <el-form-item>
        <el-select filterable v-model="checkedCertTypeId" placeholder="请选择证件类型"  clearable style="width:100%">
          <el-option
            v-for="item in certTypeList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="newCertName" @input="filterCertName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      height="500px"
      :data="certNameList.filter(data => !search || data.certTypeName.toLowerCase().includes(search.toLowerCase()))"
      border
    >
      <el-table-column align="center" type="index" label="序号" />
      <el-table-column align="center" prop="certTypeName" label="证件类型">
        <template slot="header" slot-scope="scope">
          <div style="display:none">{{scope.row || ''}}</div>
          <el-input v-model="search" size="mini" placeholder="请输入证件名称" />
        </template>
        <template slot-scope="scope">
          <div>{{scope.row.certTypeName}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="certName" label="证件名称">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            v-model="scope.row.certName"
            :ref="scope.row.certName"
            @change="editorValChanged(scope.row)"
            @keyup.enter.native="editorBlur(scope.row)"
            @blur="update(scope.row, scope.row.index)"
          />
          <span v-else>{{scope.row.certName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="setEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  name: 'certNameManager',
  data() {
    return {
      search: '',
      visible: false,
      certNameList: [],
      certTypeList: [],
      newCertName: '',
      checkedCertTypeId: ''
    }
  },
  methods: {
    open() {
      this.visible = true
      this.checkedCertTypeId = ''
      this.newCertName = ''
      this.loadCertNameList()
    },
    filterCertName(e) {
      this.newCertName = this.validSe(e)
    },
    setEdit(item) {
      this.$set(item, 'isEdit', true)
      this.$nextTick(() => {
        this.$refs[item.certName].focus()
      })
    },
    editorValChanged(item) {
      this.$set(item, 'hasChanged', true)
    },
    editorBlur(item) {
      console.log(this.$refs)
      this.$refs[item.certName].blur()
    },
    async add() {
      if (this.checkedCertTypeId === '') {
        this.$notify.error({ title: '失败', message: '请先选择证件类型' })
        return false
      }
      var res = await this.$http.post('/usercenter-admin/dict/addCertName', {
        id: this.checkedCertTypeId,
        certName: this.newCertName
      })
      if (res.code === 200) {
        this.newCertName = ''
        this.$notify.success({ title: '成功', message: '保存证件名称成功' })
        this.loadCertNameList()
      }
    },
    async update(item, index) {
      var res = await this.$http.post('/usercenter-admin/dict/updateCertName', {
        id: item.certTypeId,
        index: index,
        newCertName: item.certName
      })
      if (res.code === 200) {
        this.$notify.success({ title: '成功', message: '保存证件名称成功' })
        this.$refs[item.certName].blur()
        this.$set(item, 'isEdit', false)
      } else {
        this.loadCertNameList()
      }
    },
    async loadCertNameList() {
      await this.$store.dispatch('user/loadCertTypeList')
      var typeList = this.$store.getters['user/certTypeList']
      var certNameList = []
      typeList.forEach(item => {
        if (item.remarks) {
          var index = 0
          var names = item.remarks.split(',')
          names.forEach(name => {
            certNameList.push({
              certTypeId: item.id,
              certTypeName: item.label,
              certName: name,
              index: index
            })
            index++
          })
        }
      })
      this.certTypeList = typeList
      this.certNameList = certNameList
    },
    async remove(item) {
      var confirm = await this.$confirm('您确认删除此证件名称吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })

      if (confirm !== 'confirm') return

      var req = {
        id: item.certTypeId,
        certName: item.certName
      }
      var res = await this.$http.post('/usercenter-admin/dict/delCertName', req)

      if (res.code === 200) {
        this.$notify.success({ title: '成功', message: '删除证件名称成功' })
        this.loadCertNameList()
      } else {
        this.$notify.error({ title: '失败', message: res.msg })
      }
    }
  },
  created() {}
}
</script>

<style>
</style>
